<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>广电服务</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../css/icons-extra.css"/>
		<script src="../js/flexible.js" type="text/javascript" charset="utf-8"></script>
		<style>
			html,
			body {
				background-color: #f6f6f6;
			}
			ul, ol { list-style:none; } 
			body input[type='text'],ul,li{padding: 0;margin: 0;}
			.clear{clear:both;height:0;font-size:0;line-height:0;visibility:hidden; overflow:hidden;}
			/*顶部*/
			.mui-content{}
			.mui-control-content .mui-loading {
				margin-top: 44px;
			}
			#sliderSegmentedControl{}
			.mui-scroll,.mui-scroll-wrapper{position: inherit;}
			.mui-slider-group{margin-top: 1.306rem;}
			#item1mobile ul li img{width: 1.173rem;height: 1.173rem;}
			.bm_nav{position: fixed;left: 0;top: 44px;height: 1.306rem;z-index: 99;background: #fff;color: #888888;border-bottom: 1px solid #c5c5c5;}
			#slider .bm_nav a{font-size: 0.453rem;line-height: 1.306rem;}
			.bm_nav #sliderSegmentedControl .mui-active{color: #1c83fc;}

			/*列表*/
			.bm_list{background: #fff;}
			.bm_list li{padding: 0.4rem 0.493rem;display: flex;justify-content: space-between;border-bottom: 1px solid #C5C5C5;}
			.bm_list li .l{width: 3.173rem;height: 1.973rem;}
			.bm_list li .l img{width: 100%;height: 100%;display: block;border-radius:0.1rem ;}
			.bm_list li .r{width: 5.666rem;height: 1.973rem;}
			.bm_list li .r p{margin: 0;color: #353535;}
			.bm_list li .r .t{font-size: 0.373rem;margin-bottom: 0.9rem;font-weight: bold;}
			.bm_list li .r .t2{font-size: 0.293rem;}
			.mui-grid-view.mui-grid-9{background: #fff;margin-top: 0.266rem;}
			
			.mk_form{width: 9.2rem;margin: 0 auto;padding: 0 0.266rem;background: #fff;border-radius: 0.13rem;margin-top: 0.533rem;}
			.mk_form form{display: inline-block;}
			.mk_form p{margin-top: 0.506rem;margin-bottom: 0;}
			.mk_form input[type='text']{height: 0.826rem;text-indent:0.2rem;}
			.mk_form label{color: #353535;font-size: 0.453rem;}
			.mk_form input[type='submit']{width: 100%;height: 1.253rem;font-size: 0.453rem;background: #000;border-color:#000 ;margin: 0.933rem 0 1.306rem 0;}
			
			.gd_list{background: #fff;}
			.gd_list li{padding: 0.4rem;display: flex;justify-content: space-between;border-bottom: 1px solid #C5C5C5;}
			.gd_list li .l{width: 3.173rem;height: 1.973rem;}
			.gd_list li .l img{width: 100%;height: 100%;display: block;border-radius:0.1rem ;}
			.gd_list li .r{width: 5.666rem;height: 1.973rem;}
			.gd_list li .r p{margin: 0;color: #353535;}
			.gd_list li .r .t{font-size: 0.373rem;font-weight: bold;}
			.gd_list li .r .t1{line-height: normal;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;font-size: 0.293rem;color: #888888;}
			.gd_list li .r .bottom p{font-size: 0.293rem;display: inline-block;}
			.gd_list li .r .bottom .ll{float: left;}
			.gd_list li .r .bottom .rr{float: right;display: flex;align-items: center;}
			.gd_list li .r .bottom span{color: #353535;}
			.gd_list li .r .bottom .browse{margin-left: 0.266rem;display: flex;align-items: center;}
			.gd_list li .r .bottom .browse i{width: 0.32rem;height: 0.23rem;background:url(../images/gd_browse_icon.png) no-repeat;background-size:100% 100% ;display: inline-block;margin-right: 0.08rem;}
			.gd_list li .r .bottom .rr i{font-size: 0.35rem;color: #1d83fc;}
		</style>
	</head>


	<body>
		<div id="app">
		<!--顶部-->
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">{{title}}</h1>
		</header>
		<div class="mui-content">
			<div id="slider" class="mui-slider">
				<div class="bm_nav">
					<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<!--<a class="mui-control-item" href="#item1mobile">实时监控</a>-->
					<!--<a class="mui-control-item" href="#item2mobile">生活缴费</a>-->
					<!--<a class="mui-control-item" href="#item3mobile">服务申报</a>-->
					<!--<a class="mui-control-item" href="#item3mobile">便民查询</a>-->
					<a v-for="(item,i) in nav_list" :data-id="item.ptid" class="mui-control-item" href="#item2mobile">{{item.name}}</a>
				</div>

				<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6" v-if="nav_list.length == 2"></div>
				<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4" v-if="nav_list.length == 3"></div>
				<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-3" v-if="nav_list.length == 4"></div>
				</div>
				
				
				<div class="mui-slider-group">
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
						<ul class="mui-table-view mui-grid-view mui-grid-9">
	            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
	                    <img src="../images/mk_1.png"/>
	                    <div class="mui-media-body">水费</div></a></li>
	            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
	                    <img src="../images/mk_2.png"/>
	                    <div class="mui-media-body">电费</div></a></li>
	            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
	                    <img src="../images/mk_3.png"/>
	                    <div class="mui-media-body">天然气</div></a></li>
	            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
	                    <img src="../images/mk_4.png"/>
	                    <div class="mui-media-body">有线电视费</div></a></li>
	            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
	                    <img src="../images/mk_5.png"/>
	                    <div class="mui-media-body">物业费</div></a></li>
	            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
	                    <img src="../images/mk_6.png"/>
	                    <div class="mui-media-body">车位费</div></a></li>
	            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
	                    <img src="../images/mk_7.png"/>
	                    <div class="mui-media-body">手机费</div></a></li>
	        </ul> 
					</div>
					<div id="item2mobile" class="mui-slider-item mui-control-content">
						<div class="mk_form">
							<form action="" method="post">
								<p>
									<label>申报名称：</label>
									<input type="text" name="" id="" value="" />
								</p>
								<p>
									<label>申报名称：</label>
									<input type="text" name="" id="" value="" />
								</p>
								<p>
									<label>申报名称：</label>
									<input type="text" name="" id="" value="" />
								</p>
								<input type="submit" value="提交申报"/>
							</form>
						</div>

					</div>
					<div id="item3mobile" class="mui-slider-item mui-control-content">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view gd_list">
									<li>
										<div class="l">
											<img src="../images/cbd.jpg"/>
										</div>
										<div class="r">
											<p class="t">数字电视、有线电视开户</p>
											<p class="t1">有线电视开户有线电视开户有线电视开户有线电视开户有线电视开户有线电视开户有线电视开户有线电视开户有线电视开户有线电视开户</p>
											<div class="bottom">
												<p class="ll time">2018-10-10</p><p class="ll browse"><i></i><span>222</span></p><p class="rr"><i v-bind:class="classe" @click="like()"></i><span>22人收藏</span></p>
											</div>
											
										</div>
									</li>
									<li>
										<div class="l">
											<img src="../images/cbd.jpg"/>
										</div>
										<div class="r">
											<p class="t">数字电视、有线电视开户</p>
											<p class="t1"></p>
											<p class="t2">2018-10-10</p>
										</div>
									</li>
									<li>
										<div class="l">
											<img src="../images/cbd.jpg"/>
										</div>
										<div class="r">
											<p class="t">数字电视、有线电视开户</p>
											<p class="t2">2018-10-10</p>
										</div>
									</li>
									<li>
										<div class="l">
											<img src="../images/cbd.jpg"/>
										</div>
										<div class="r">
											<p class="t">数字电视、有线电视开户</p>
											<p class="t2">2018-10-10</p>
										</div>
									</li>
									<li>
										<div class="l">
											<img src="../images/cbd.jpg"/>
										</div>
										<div class="r">
											<p class="t">数字电视、有线电视开户</p>
											<p class="t2">2018-10-10</p>
										</div>
									</li>
									<li>
										<div class="l">
											<img src="../images/cbd.jpg"/>
										</div>
										<div class="r">
											<p class="t">数字电视、有线电视开户</p>
											<p class="t2">2018-10-10</p>
										</div>
									</li>
									<li>
										<div class="l">
											<img src="../images/cbd.jpg"/>
										</div>
										<div class="r">
											<p class="t">数字电视、有线电视开户</p>
											<p class="t2">2018-10-10</p>
										</div>
									</li>
								</ul>
							</div>
						</div>
					

					</div>
					<div id="item4mobile" class="mui-slider-item mui-control-content">
						<div id="scroll4" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<div class="mui-loading">
									<div class="mui-spinner">
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			
			</div>


		</div>
		</div>
	</body>

</html>
<script src="../js/mui.min.js"></script>
<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    var vue = new Vue({
        el: '#app',
        data: {
            classe:'mui-icon-extra mui-icon-extra-heart',
            nav_list:[],
            title:'',
        },
        methods:{
            //点赞
            like:function(){
                this.classe='mui-icon-extra mui-icon-extra-heart-filled'
                console.log(this.class)
                mui.toast('点赞成功',{ duration:'long', type:'div' })
            }
        }
    })
    var url = "http://zhapp.135k.com/";
    var href = location.href;
    var tid = href.split("=")[1].split("&");
    var name = href.split("=")[2];
    console.log(tid[0]);
    console.log(name);
   	vue.title=name

    if (typeof document.addEventListener != "undefined") {
        document.addEventListener("erJi",function(event) {
            var id = event.detail.id;
            console.log(id)
            mui.get(url+"api/article/getCatOne",{tid:id,name:name},function(data){
                console.log(data)
                // mui.each(data.data,function(key,value){
                //     vue.banner.push(value)
                // });
                // vue.banner_previous.push(vue.banner[0])
                // vue.banner_next.push(vue.banner[vue.banner.length-1])
                // //console.log(vue.banner.length)
                //
            },'json');

        }, false);
    } else {
        document.attachEvent("onload",function(event) {
            var id = event.detail.id;
            console.log(id)

        })
    }

	//mui初始化
	mui.init({
		swipeBack: false,
    });
	(function($) {
		$('.mui-scroll-wrapper').scroll({
			indicators: true //是否显示滚动条
		});
		var html2 = '<ul class="mui-table-view"><li class="mui-table-view-cell">第二个选项卡子项-1</li><li class="mui-table-view-cell">第二个选项卡子项-2</li><li class="mui-table-view-cell">第二个选项卡子项-3</li><li class="mui-table-view-cell">第二个选项卡子项-4</li><li class="mui-table-view-cell">第二个选项卡子项-5</li></ul>';
		var html3 = '<ul class="mui-table-view"><li class="mui-table-view-cell">第三个选项卡子项-1</li><li class="mui-table-view-cell">第三个选项卡子项-2</li><li class="mui-table-view-cell">第三个选项卡子项-3</li><li class="mui-table-view-cell">第三个选项卡子项-4</li><li class="mui-table-view-cell">第三个选项卡子项-5</li></ul>';
		var item2 = document.getElementById('item2mobile');
		var item3 = document.getElementById('item3mobile');
		document.getElementById('slider').addEventListener('slide', function(e) {
			if (e.detail.slideNumber === 1) {
				if (item2.querySelector('.mui-loading')) {
					setTimeout(function() {
						item2.querySelector('.mui-scroll').innerHTML = html2;
					}, 500);
				}
			} else if (e.detail.slideNumber === 2) {
				if (item3.querySelector('.mui-loading')) {
					setTimeout(function() {
						item3.querySelector('.mui-scroll').innerHTML = html3;
					}, 500);
				}
			}
		});
	})(mui);

	//获取二级分类
    mui.get(url+"api/article/getCatTwo/tid/"+tid,{},function(data){
        var json = JSON.parse(data).data;
        console.log(json)
        mui.each(json,function(key,value){
            vue.nav_list.push(value)
        });
    },'json');

	//获取三级分类
    mui("#app").on('tap','.mui-control-item',function(){
        //获取id
        var ptid = this.getAttribute("data-id");
        mui.get(url+"api/article/getCatThree/ptid/"+ptid,{},function(data){
            // console.log(data)
            var json = JSON.parse(data).data;
            console.log(json)
            return false
            // mui.each(json,function(key,value){
            //     vue.nav_list.push(value)
            // });

        },'json');
    });

    //获取三级分类下的列表


</script>